<template>
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 仓库 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                @change='ban_warehouse(ser.warehouse_id,cangkulist)'
                v-model="ser.warehouse_id"
                placeholder="请选择仓库"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in cangkulist"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 货架 </el-col>
            <el-col :span="16">
              <el-select
                filterable  
                v-model="ser.goods_shelf_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in huojialist"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.model_number_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberLists"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 规格 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.specification_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in SpecificationList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
       
        </el-col>
        <el-col>
          <el-button @click="search(0)" class="add_btn" icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn"
            >重置</el-button
          >
          <!-- <el-button @click="search(2)" icon="el-icon-plus" class="add_btn"
            >导出</el-button
          > -->
          <!-- <el-button @click="del_SemiFinishProduct" icon="el-icon-plus" class="add_btn"
            >删除</el-button
          > -->
        </el-col>
      </el-row>
    </div>

    <el-table
      :data="dataList"
      v-loading="loading"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
    <el-table-column label="仓库">
      <template slot-scope="scope">
        {{scope.row.warehouse?scope.row.warehouse.warehouse_name:''}}
      </template>
    </el-table-column>
    <el-table-column label="货架">
      <template slot-scope="scope">
        {{scope.row.goods_shelf?scope.row.goods_shelf.goods_shelf_name:''}}
      </template>
    </el-table-column>
    <el-table-column label="产品">
      <template slot-scope="scope">
        {{scope.row.product?scope.row.product.product_name:''}}
      </template>
    </el-table-column>
    <el-table-column label="型号">
      <template slot-scope="scope">
        {{scope.row.model_number?scope.row.model_number.model_number:''}}
      </template>
    </el-table-column>
    <el-table-column label="规格">
      <template slot-scope="scope">
        {{scope.row.specification?scope.row.specification.specification:''}}
      </template>
    </el-table-column>
    <el-table-column label="订单号">
      <template slot-scope="scope">
        {{scope.row.order?scope.row.order.order_number:''}}
      </template>
    </el-table-column>
    <el-table-column label="流水号">
      <template slot-scope="scope">
        {{scope.row.order?scope.row.order.serial_number:''}}
      </template>
    </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-popconfirm
                  v-permission="['dingdan_shanchu']"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除此订单吗？"
                  @confirm="del_SemiFinishProduct(scope.row)"
                >
                  <el-button slot="reference" size="small" type="text"
                    >删除</el-button
                  >
                </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="添加到成品库"
      :visible.sync="ishuojia"
      width="38%"
      :close-on-click-modal="false"
      @close="close_dialog"
    >
      <div style="width: 100%; margin: 0 auto">
        <el-row style="display: flex; align-items: center">
          <el-col :span="6"> 件数 </el-col>
          <el-col :span="18">
            <el-input v-model="query.num" type="number"></el-input>
          </el-col>
        </el-row>
        <el-row style="display: flex; align-items: center; margin-top: 10px">
          <el-col :span="6"> 仓库名称 </el-col>
          <el-col :span="18">
            <el-select
              v-model="query.warehouse_id"
              placeholder="请选择仓库"
              @change="select_huojiua"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in cangkulist"
                :key="index"
                :label="item.warehouse_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row
          style="
            display: flex;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 10px;
          "
        >
          <el-col :span="6"> 货架名称 </el-col>
          <el-col :span="18">
            <el-select
              v-model="query.goods_shelf_id"
              placeholder="请选择货架"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in huojialist"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <uplodeImg
          v-if="ispiliang == false"
          ref="Upload"
          :value="imgUrl"
          :limit="limit"
          @subImg="subImg"
        ></uplodeImg>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ishuojia = false">取 消</el-button>
        <el-button type="primary" @click="push_cangku()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSemiFinishProductList,
  addFinishProduct,
  getWarehouseList,
  getCustomerList,
  getModelNumberList,
  getProductList,
  downloadcode,
  getSpecificationList,
  getSemiFinishProductInfoList,
  delSemiFinishProduct
} from "@/api/product/index";
import uplodeImg from "@/components/ImageUpload";
export default {
  components: {
    uplodeImg,
  },
  data() {
    return {
      jingxiaoshanglist:[],
      limit: 4,
      imgUrl: "",
      loading: true,
      formatterTime(row, column) {
        let data = row[column.property];
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
      },
      // 搜索
      ModelNumberLists: [],
      ModelNumberList: [],
      SpecificationList:[],
      order_data: [],
      ser: {
        warehouse_id:'',
        goods_shelf_id:'',
        model_number_id:'',
        specification_id:''
      },
      CustomerList: [],
      productList: [],
      ishuojia: false,
      dataList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      uploadImgUrl: this.$global.imgQianJui,
      total: 0,
      query: {
        ids: [],
        num: "",
        warehouse_id: "",
        goods_shelf_id: "",
        image_arr: [],
      },
      huojialist: [],
      cangkulist: [],
      cangweilist:[],
      imagelist: [],
      ispiliang: false,
    };
  },
  mounted() {
    // this.getCustomer();
    if(this.$route.query.warehouse_id){
      this.ser.warehouse_id=this.$route.query.warehouse_id
    }
    if(this.$route.query.goods_shelf_id){
      this.ser.goods_shelf_id=this.$route.query.goods_shelf_id
    }
    if(this.$route.query.model_number_id){
      this.ser.model_number_id=this.$route.query.model_number_id
    }
    if(this.$route.query.specification_id){
      this.ser.specification_id=this.$route.query.specification_id
    }
    this.getlist();
    console.log( this.ser.specification_id)
  },
  watch:{
    "ser.warehouse_id"(news,olds){
      console.log(news)
       this.getcangku(news).then(res=>{
          console.log(res)
         this.ban_warehouse(news,res)
       })
    },
    "ser.model_number_id"(news,olds){
      this.getModel();
      this.get_SpecificationList()
    },
    "ser.specification_id"(news,olds){
      this.getModel();
      this.get_SpecificationList()
    },
  },
  methods: {
    del_SemiFinishProduct(row){
      let ids=[]
      ids.push(row.id)
      delSemiFinishProduct({ids}).then(res=>{
        if(res.code==200){
          this.getlist();
          this.$message.success("提交成功");
        }
      })
    },
    ban_warehouse(id,list){
      console.log()
      list.forEach(item => {
        if (item.id == id) {
          this.huojialist = item.children
        }
      })
    },
    get_SpecificationList() {
      getSpecificationList({ per_page:99999 }).then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });
    },
    subImg(id) {
      // this.ruleForm.file_id = id;
      // console.log(id);
      this.query.image_arr.push(id);
    },
    formatterTimes(data) {
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).toString().slice(0, 11);
    },
    // 指定查询
    search(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getSemiFinishProductInfoList({ ...this.ser, ...this.pagination }).then(
        (res) => {
          if (res.code == 200) {
            this.dataList = res.data.data;
            this.total = res.data.total;
            if (type == 2) {
              if (res.data.data.length > 0) {
                this.$message.success("正在导出订单列表");
                this.exports_w();
              }
            }
          }
        }
      );
    },
    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      downloadcode(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "订单信息";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        warehouse_id:'',
        goods_shelf_id:'',
        model_number_id:'',
        specification_id:''
      };
      this.getlist();
    },
    //客户列表
    getCustomer() {
      getCustomerList().then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // 型号列表
    async   getModel() {
      var arry=[]
      await  getModelNumberList({per_page:99999}).then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
          arry=res.data.data;  
        }
      });
      return arry
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },
    product_id_change(val) {
      console.log(val);
      this.ser.model_number_id = "";
      this.get_producModel(val);
    },
    get_producModel(id) {
      getModelNumberList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    select_huojiua(val) {
      console.log(val);
      this.huojialist = [];
      this.query.goods_shelf_id = "";
      this.cangkulist.forEach((element) => {
        if (val == element.id) {
          this.huojialist = element.goods_shelf;
          console.log(this.huojialist);
        }
      });
      console.log(this.huojialist);
    },
    async getcangku() {
      var arry=[]
    await  getWarehouseList().then((res) => {
        if (res.code == 200) {
          this.cangkulist = res.data.data;
          arry =res.data.data;
        }
      });
      return arry
    },
    getlist() {
      getSemiFinishProductInfoList({ ...this.pagination, ...this.ser }).then(
        (res) => {
          if (res.code == 200) {
            this.dataList = res.data.data;
            this.total = res.data.total;
            this.loading = false;
          }
        }
      );
    },
    close_dialog() {
      this.query = {
        ids: [],
        num: "",
        warehouse_id: "",
        goods_shelf_id: "",
      };
    },
    add_products() {
      if (this.query.ids.length == 0) {
        this.$message({
          message: "请选择一条或多条数据",
          type: "error",
        });
        return false;
      }
      this.ishuojia = true;
      this.ispiliang = true;
    },
    add_product(row) {
      this.ispiliang = false;
      this.query.ids.push(row.id);
      this.ishuojia = true;
      this.$nextTick(function () {
        this.$refs.Upload.pus_value();
      });
    },
    push_cangku() {
      if (this.query.num == "") {
        this.$message({
          message: "请填写件数",
          type: "error",
        });
        return false;
      }

      if (this.query.warehouse_id == "") {
        this.$message({
          message: "请选择仓库",
          type: "error",
        });
        return false;
      }

      if (this.query.goods_shelf_id == "") {
        this.$message({
          message: "请选择货架",
          type: "error",
        });
        return false;
      }
      var isimg = true;
      this.$refs.Upload.$el.children[0].children[0].children.forEach((item) => {
        console.log(item.className);
        if (item.className == "el-upload-list__item is-ready") {
          isimg = false;
        }
      });
      if (isimg == false) {
        this.$message({
          message: "请点击上传到服务器！后重试~",
          type: "error",
        });
        return false;
      }
      addFinishProduct(this.query).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.ishuojia = false;
          this.query = {
            ids: [],
            num: "",
            warehouse_id: "",
            goods_shelf_id: "",
          };
          this.getlist();
        }
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      val.forEach((item) => {
        this.query.ids.push(item.id);
      });
    },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
  },
};
</script>

<style scoped>
.d {
  color: black !important;
}
</style>
